<template>
  <div class="home-ranking">
    <h2>音乐榜单 {{ $route.query.rankList }}</h2>
    <template v-if="rankList">
      <ul>
        <li v-for="item in rankList"
        :key="item">
          {{ item.name }}
        </li>

        <li v-for="item in JSON.parse($route.query.rankList)"
        :key="item">
          {{ item.name }}
        </li>
      </ul>
    </template>
    
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

  const route = useRoute()  
  
  const rankList = JSON.parse(route.query.rankList)

  for (const v in rankList) {
    
    console.log(rankList[v].name)
  }

</script>

<style scoped>
</style>